<template>
  <div class="container">
    <div class="title">
      <span>工资表</span>
      <el-date-picker
        v-model="monthRange"
        type="monthrange"
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        value-format="YYYY-MM"
        @change="getSalary"
      >
      </el-date-picker>
    </div>
    <div v-for="item in monthEve" :key="item.keyMonth">
      <span class="tableTitle">{{ item.keyMonth }}</span>
      <el-table :data="item.keyData" height="780">
        <el-table-column
          prop="item.index"
          label="序号"
          max-width="100"
          align="center"
        >
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>

        <el-table-column
          prop="name"
          label="姓名"
          max-width="170"
          align="center"
        />
        <el-table-column
          prop="position"
          label="职位"
          max-width="170"
          align="center"
        />
        <el-table-column
          prop="attendance_days"
          label="应出勤天数"
          max-width="170"
          align="center"
        />
        <el-table-column
          prop="actual_days"
          label="实际出勤天数"
          max-width="170"
          align="center"
        />
        <el-table-column
          prop="basic_salary"
          label="基本工资"
          max-width="170"
          align="center"
        />
        <el-table-column label="应发栏" max-width="170" align="center">
          <el-table-column
            prop="overtime_salary"
            label="平时加班费"
            max-width="170"
            align="center"
          />
          <el-table-column
            prop="holiday_overtime_salary"
            label="假日加班费"
            max-width="170"
            align="center"
          />
          <el-table-column
            prop="seniority_salary"
            label="工龄工资"
            max-width="170"
            align="center"
          />
          <el-table-column
            prop="allowance"
            label="补贴"
            max-width="170"
            align="center"
          />
          <el-table-column
            prop="bonus"
            label="福利/奖金"
            max-width="170"
            align="center"
          />
          <el-table-column
            prop="total_management_system"
            label="全勤奖"
            max-width="170"
            align="center"
          />
          <el-table-column
            prop="achievement"
            label="绩效"
            max-width="170"
            align="center"
          />
        </el-table-column>
        <el-table-column
          prop="gross_salary"
          label="应发工资"
          max-width="170"
          align="center"
        />
        <el-table-column label="应扣栏" max-width="170" align="center">
          <el-table-column
            prop="social_security_ded"
            label="社保费"
            max-width="170"
            align="center"
          />
          <el-table-column
            prop="housing_fund_ded"
            label="公积金"
            max-width="170"
            align="center"
          />
          <el-table-column
            prop="nuclear_based"
            label="核基"
            max-width="170"
            align="center"
          />
          <el-table-column
            prop="attendance_deduction"
            label="出勤扣款"
            max-width="170"
            align="center"
          />
          <el-table-column
            prop="sbbj"
            label="社保补缴"
            max-width="170"
            align="center"
          />
          <el-table-column
            prop="gs"
            label="个税"
            max-width="170"
            align="center"
          />
        </el-table-column>
        <el-table-column
          prop="net_salary"
          label="实发工资"
          max-width="170"
          align="center"
        />
        <el-table-column
          prop="remark"
          label="备注"
          max-width="170"
          align="center"
        />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getSalaryList } from "@/api/getList";
import { ElMessage } from "element-plus";
const monthRange = ref([]);
const monthEve = ref([]);
monthRange.value[0] = history.state.startMonth;
monthRange.value[1] = history.state.endMonth;
const getSalary = () => {
  getSalaryList({
    start_month: monthRange.value[0],
    end_month: monthRange.value[1],
  }).then((res) => {
    if (Object.keys(res.data).length === 0) {
      ElMessage.error("文件不存在，请上传！");
    } else {
      monthEve.value = [];
      for (const key in res.data) {
        monthEve.value.push({
          keyMonth: key,
          keyData: res.data[key],
        });
      }
    }
  });
};
onMounted(() => {
  getSalary();
});
</script>

<style lang="less" scoped>
.container {
  height: calc(100vh - 142px);
  background: @mainColor;

  .title {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
  span {
    margin: 1vw;
  }
}
.tableTitle {
  display: inline-block;
  margin: 1vh;
  font-size: 1.2vw;
}
:deep(.title) {
  width: 25vw;
}
</style>
